<template>
	<view class="shop">
		<u-navbar title="会员商城" back-icon-color="#000" title-color="#000" :title-bold="true" :immersive="true"
			:border-bottom="false"
			:background="{background:scrollTop > headHeight ? 'linear-gradient(142deg, #FFF3E5 0%, #E4C79B 100%)' : 'none'}"
			:is-back="false"></u-navbar>
		<view class="m-head">
			<view class="m-head-font1">
				<text>当前积分</text>
			</view>
			<view class="m-head-font2">
				<text>{{userInfo.jifen || 0}}</text>
			</view>
			<view class="m-head-menu">
				<view class="m-head-menu__item" @click="to_link('/pages2/points-detail/points-detail')">
					<image src="@/static/shop/ico_jfmx.png" mode=""></image>
					<text>积分明细</text>
				</view>
				<view class="m-head-menu__item" @click="to_link('/pages2/shop-rule/shop-rule')">
					<image src="@/static/shop/ico_jfgz.png" mode=""></image>
					<text>规则</text>
				</view>
			</view>
		</view>

		<view class="m-search" @click="to_link('/pages2/shop-search/shop-search')">
			<image src="@/static/shop/icon-search.png" mode=""></image>
			<text>商品搜索</text>
		</view>
		<view class="m-menu">
			<view class="m-menu-item" v-for="(item,index) in menuList" :key="index" @click="toMenuFun(item)">
				<view class="m-menu-image">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="m-menu-text">
					<text>{{item.title}}</text>
				</view>
			</view>
			<!-- <view class="m-menu-item"  @click="to_link('/pages2/shop-type/shop-type')">
				<view class="m-menu-image">
					<image src="@/static/shop/shop-more.png" mode=""></image>
				</view>
				<view class="m-menu-text">
					<text>更多分类</text>
				</view>
			</view> -->
		</view>
		<view class="m-title">
			<image src="@/static/shop/shop-title.png" mode=""></image>
		</view>
		<!-- <view class="m-list">
			<view class="m-item" v-for="(item,index) in list" :key="index" @click="to_link('/pages2/shop-detail/shop-detail?id='+item.inventoryId)">
				<view class="m-item-image">
					<image :src="item.img" mode="aspectFill"></image>
				</view>
				<view class="m-item-title u-line-2">
					<text>{{item.title}}</text>
				</view>
				<view class="m-item-bottom">
					<text class="m-item-left">{{item.price_sale}}</text>
					<view class="m-item-right">
						<image src="@/static/shop/shop-goods-cart.png" mode=""></image>
					</view>
				</view>
			</view>
		</view> -->
		<view class="m-list">
			<view class="m-item" v-for="(item,index) in list" :key="index" @click="toDetail(item.id)">
				<view class="m-item-image">
					<view class="m-item-tip">
						<text>推荐</text>
					</view>
					<image :src="item.img" mode="aspectFill"></image>
					<view class="m-item-image__bottom">
						<view class="m-item-image__left">
							<image src="@/static/index/icon-address.png" mode=""></image>
							<text>{{item.third_data.CityName}}·{{item.third_data.WeMapDistrict}}</text>
						</view>
						<view class="m-item-image__right">
							<text>{{item.star}}</text>
						</view>
					</view>
				</view>
				<view class="m-item-title u-line-2">
					<text>{{item.title}}</text>
				</view>
				<view class="m-item-tags">
					<!-- <text>{{getTipComputed(item)}}</text> -->
					<block v-for="(val,key) in item.landmark">
						<view class="m-item-tag__item" v-if=" val.title.indexOf(item.third_data.WeMapDistrict) == -1"
							:key="key">
							<image v-if="val.originalPic" :src="val.originalPic" mode=""></image>
							<text>{{val.title}}</text>
						</view>
					</block>
				</view>
				<view class="m-item-bottom">
					<view class="m-item-bottom__left">
						<text class="m-item-jifen" v-if="item.jifen > 0">{{item.jifen}}积分</text>
						<text class="m-item-price" v-else>{{item.lowest_prices}}</text>
					</view>
					<view class="m-item-bottom__right">
						<text>{{item.order_num}}+订</text>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loading"></uni-load-more>

		<!-- <view class="m-cart">
			<view class="m-cart-view" @click="to_link('/pages2/shop-cart/shop-cart')">
				<u-badge type="error" :count="carCount" :offset="[5,5]"></u-badge>
				<image src="@/static/shop/shop-fixed-cart.png" mode=""></image>
			</view>
		</view> -->
		<m-login></m-login>
	</view>
</template>

<script>
	import {
		sliceDate,
		get_timestamp,
		get_date
	} from "@/common/function/tools.js"
	import {
		get_userInfo
	} from "@/common/function/api_fun.js"
	export default {
		data() {
			return {
				scrollTop: 0,
				headHeight: uni.upx2px(480),
				userInfo: {},

				menuList: [],

				areaList: [],
				channel_id: -99,
				list: [],
				page: 1,
				limit: 10,
				loadStatus: 'loading',
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		onReachBottom() {
			if (this.loadStatus == 'more') {
				this.getListFun()
			}

		},
		onLoad() {
			
			this.getArea()
			this.getDataFun()
			// this.getListFun() 
			//监听重置
			uni.$on('resetListFun', (type = 'area') => {
				this.list = []
				this.page = 1
				// console.log(type);
				if (type == 'area') {
					// this._city = this.vuexCity
					let item = this.areaList.find(item => item.title.indexOf(this.vuexCity) > -1)
					this.channel_id = item ? item.id : -99
					// this.getArea()
				}
				this.getListFun()

			})
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				get_userInfo((info) => {
					this.userInfo = info
				})
				// this.getCarFun()
			}
		},
		methods: {
			//跳转到详情页
			toDetail(id) {
				wx.navigateTo({
					url: '/pages/list/detail?id=' + id + '&startDate=' + this.vuexStartDateObj.dateStr +
						'&endDate=' + this.vuexEndDateObj.dateStr+'&order_sup='+2+'&if_jifen=1',
				})
			},
			toMenuFun(item) {
				if (item.title == '积分兑券') {
					this.to_link('/pages2/coupon-list/coupon-list')
				} else if (item.title == '积分换房') {
					this.toCitySelectedFun('/pages/list/list?payType=jifen&order_sup=2')
				}
				// this.$m.msg('建设中')
				// this.to_link('/pages2/shop-list/shop-list?channel_id='+item.channel_id)
			},
			toCitySelectedFun(url) {
				if (this.vuexCity) {
					this.to_link(url)
				} else {
					uni.showModal({
						title: '定位失败',
						content: '请手动选择城市，为您查询酒店',
						confirmColor: '#D3A358',
						confirmText: '选择城市',
						success: (e) => {
							if (e.confirm) {
								this.to_link('/pages/addressList/addressList')
							}
						}
					})
				}
			},

			getArea() {
				this.$http.getJson('hotal_channel').then(res => {
					if (res.code == 1) {
						let list = res.data || []
						if (list.length > 0) {
							let item = res.data.find(item => item.title.indexOf(this.vuexCity) > -1)
							this.areaList = list
							this.channel_id = item ? item.id : -99
							this.getListFun()
						}
					}
				})
			},
			getDataFun() {
				this.$http.getJson('index_index').then(res => {
					if (res.code == 1) {
						let {
							adverts
						} = res.data
						let item = adverts.find(val => val.title == '首页分类')
						if (item) {
							this.menuList = item.images || []
						}

					}
				})
			},
			getCarFun() {
				this.$http.getJson('gouwuche_lists').then(res => {
					if (res.code == 1) {
						let count = 0
						if (res.data.length > 0) {
							res.data.forEach(item => {
								count += Number(item.num)
							})
						}
						this.carCount = count
					}
				})
			},
			getListFun() {
				let {
					lng,
					lat
				} = this.vuexLocation;
				this.loadStatus = 'loading'

				let params = {
					longitude: lng,
					latitude: lat,
					channel_id: this.channel_id || '',
					if_jifen: 1,

					arrive_time: this.vuexStartDateObj.dateStr,
					departure_time: this.vuexEndDateObj.dateStr,
					order_sup: 2,

					page: this.page,
					pagenum: this.limit
				}

				this.$http.getJson('hotal_searchList', params).then(res => {
					if (res.code == 1) {
						let data = res.data.list || []
						let len = data.length
						if (len > 0) {
							this.list = this.list.concat(data)
						}
						if (len == this.limit) {
							this.loadStatus = 'more'
							this.page += 1
						} else {
							this.loadStatus = 'noMore'
						}
					} else {
						this.$m.msg(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.shop {
		background-image: url("@/static/shop/shop-bg.png");
		background-repeat: no-repeat;
		background-size: 750rpx 480rpx;
	}

	.m-head {
		position: relative;
		width: 750rpx;
		height: 480rpx;

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 32rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background: #fff;
		}

		.m-head-font1 {
			font-size: 24rpx;
			color: #9A958F;
			line-height: 33rpx;
			padding-top: 204rpx;
			padding-left: 30rpx;
		}

		.m-head-font2 {
			font-size: 80rpx;
			color: #34302D;
			line-height: 106rpx;
			padding-left: 30rpx;
		}

		.m-head-menu {
			display: flex;
			align-items: center;
			padding-top: 40rpx;
			padding-left: 30rpx;

			.m-head-menu__item {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #906F4C;
				margin-right: 40rpx;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.m-search {
		display: flex;
		align-items: center;
		width: 700rpx;
		height: 60rpx;
		background: #F6F6F6;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
		margin-left: 25rpx;
		padding: 0 30rpx;
		font-size: 26rpx;
		color: #BDBDBD;

		image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
		}
	}

	.m-menu {
		display: flex;
		flex-wrap: wrap;
		padding: 40rpx 10rpx 0;

		.m-menu-item {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 20%;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;

			.m-menu-image {
				display: flex;
				justify-content: center;
				position: relative;
				width: 100%;
				height: 120rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.m-menu-text {
				position: absolute;
				width: 100%;
				bottom: 0;
				font-size: 24rpx;
				color: #34302D;
				text-align: center;
				padding-top: 16rpx;
				line-height: 33rpx;
			}
		}
	}

	.m-title {
		display: flex;
		align-items: center;
		padding: 32rpx 25rpx 0;

		image {
			width: 141rpx;
			height: 34rpx;
		}
	}

	.m-list {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 30rpx 30rpx 10rpx;

		.m-item {
			width: 335rpx;
			background: #fff;
			border-radius: 30rpx;
			margin-bottom: 20rpx;

			.m-item-image {
				position: relative;
				width: 335rpx;
				height: 335rpx;

				image {
					width: 100%;
					height: 100%;
					border-top-left-radius: 30rpx;
					border-top-right-radius: 30rpx;
				}

				.m-item-tip {
					position: absolute;
					top: 0;
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 80rpx;
					height: 40rpx;
					background: #D3A358;
					border-top-left-radius: 30rpx;
					border-bottom-right-radius: 30rpx;
					font-size: 24rpx;
					color: #fff;
				}

				.m-item-image__bottom {
					position: absolute;
					left: 0;
					bottom: 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 335rpx;
					height: 68rpx;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);

					.m-item-image__left {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #fff;
						line-height: 33rpx;
						padding-left: 20rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.m-item-image__right {
						font-size: 48rpx;
						color: #E4C89A;
						padding-right: 20rpx;

						&::after {
							content: '分';
							font-size: 26rpx;
						}
					}
				}
			}

			.m-item-title {
				margin-top: 16rpx;
				height: 84rpx;
				line-height: 42rpx;
				font-size: 30rpx;
				color: #33302D;
				font-weight: 600;
				padding-left: 16rpx;
				padding-right: 16rpx;
			}

			.m-item-tags {
				display: flex;
				flex-wrap: wrap;
				font-size: 24rpx;
				color: #9B958F;
				line-height: 33rpx;
				padding: 12rpx 16rpx 0;

				.m-item-tag__item {
					display: flex;
					align-items: center;
					margin-right: 10rpx;
					margin-bottom: 10rpx;

					image {
						flex-shrink: 0;
						width: 33rpx;
						height: 33rpx;
						margin-right: 4rpx;
					}
				}
			}

			.m-item-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0rpx 16rpx 30rpx 16rpx;

				.m-item-bottom__left {
					.m-item-jifen{
						font-size: 40rpx;
						color: #DE2C38;
						font-weight: 500;
						
						&::after {
							content: '起';
							color: #76706B;
							font-size: 20rpx;
							font-weight: 400;
						}
					}
					.m-item-price {
						font-size: 40rpx;
						color: #DE2C38;
						font-weight: 500;

						&::before {
							content: '￥';
							font-size: 20rpx;
						}

						&::after {
							content: '起';
							color: #76706B;
							font-size: 20rpx;
							font-weight: 400;
						}
					}
				}

				.m-item-bottom__right {
					font-size: 24rpx;
					color: #D3A358;
				}
			}
		}
	}

	.m-cart {
		position: fixed;
		right: 25rpx;
		bottom: 40rpx;
		width: 90rpx;
		height: 90rpx;
		background: linear-gradient(180deg, #E4C79B 0%, #D3A358 100%);
		box-shadow: 0rpx 8rpx 16rpx 1rpx rgba(211, 163, 88, 0.3);
		border-radius: 50%;

		.m-cart-view {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 100%;
		}

		image {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>